<template>

  <div style="overflow: scroll;">
    <div class="report-title" >
      <span style="border-left:5px rgb(80,80,255) solid">修改个人信息</span>
    </div>
    <div class="ProfileHeader-content">
      <!--        用户名            -->
      <div class="ProfileHeader-contentHead">
        <h1 class="ProfileHeader-title">
          <!--          用户名 正常显示        -->
          <div  v-bind:class="{FullNameField_editable:HeadIsActive}">
            <!--                用户名 当没有信息时的显示-->
            <div v-if="this.per_info.name===''">
              <button type="button" class="Edit-per-button " @click="Editor('head')" >
                <svg t="1626683447550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="933" width="200" height="200"><path d="M912.423674 1024H22.590689a489.230175 489.230175 0 0 1 311.130103-455.461013 312.375869 312.375869 0 1 1 357.223452 0.222458A489.207929 489.207929 0 0 1 1001.406972 1024h-88.983298z m-176.053456-711.399225a223.859733 223.859733 0 1 0-223.859734 223.859733 223.859733 223.859733 0 0 0 223.815242-223.859733z m-197.342711 310.974382c-8.89833 0.734112-17.663185 1.334749-26.694989 1.334749-9.365492 0-18.597509-0.600637-27.740543-1.401487a401.003235 401.003235 0 0 0-364.364362 311.441545h782.007473a400.914251 400.914251 0 0 0-363.207579-311.374807z" fill="#175199" p-id="934"></path></svg>
                点击设置用户名
              </button>
            </div>
            <div v-else>
              <span class="FullNameField-name" >{{per_info.name}}</span>
              <button type="button" class="Edit-per-button " @click="Editor('head')" >
                <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>
                修改
              </button>
            </div>
          </div>
          <!--             用户名 编辑模式           -->
          <div  v-bind:class="{FullNameField_edit:!HeadIsActive}">
            <h3 class="NameField-label">用户名</h3>
            <div class="nameField-content">
              <input class="FieldName-input"  @input="InputStander('head')" v-model="per_info.name" >
              <div class="">
                <input :disabled="this.isNameNull" type="button" value="保存" class="button-save" @click="saveName('head')">
                <input type="button" value="取消" class="button-cancel" @click="cancel('head')">
              </div>
            </div>
          </div>
        </h1>
      </div>

      <div class="ProfileEdit-fields">

        <!--       性别       -->
        <form class="Field">
          <!--         性别  正常显示        -->
          <div class="Field-inline" v-bind:class="{Field_edit:SexIsActive}">


            <!--    性别  当没有信息时的显示     -->
            <div v-if="this.per_info.sex===''">
              <h3 class="Field-label">性别</h3>
              <button type="button" class="Edit-per-button First-edit" @click="Editor('sex')" >
                <svg t="1626684200128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2090" width="200" height="200"><path d="M448 672H320v-98.55C428.51 557.89 512 464.82 512 352c0-123.71-100.29-224-224-224S64 228.29 64 352c0 112.82 83.49 205.89 192 221.45V672H128a32 32 0 0 0 0 64h128v128a32 32 0 0 0 64 0V736h128a32 32 0 0 0 0-64zM128 352c0-88.22 71.78-160 160-160s160 71.78 160 160-71.78 160-160 160-160-71.78-160-160zM768 450.54V237.25l81.14 81.14a32 32 0 0 0 45.25 0 32 32 0 0 0 0-45.25L758.63 137.37c-0.06-0.05-0.14-0.07-0.19-0.12a31.93 31.93 0 0 0-44.88 0c0 0.05-0.13 0.07-0.19 0.12L577.61 273.14a32 32 0 0 0 45.25 45.25L704 237.25v213.29C595.49 466.11 512 559.18 512 672c0 123.71 100.29 224 224 224s224-100.29 224-224c0-112.82-83.49-205.89-192-221.46zM736 832c-88.22 0-160-71.78-160-160s71.78-160 160-160 160 71.78 160 160-71.78 160-160 160z" p-id="2091" fill="#175199"></path></svg>
                点击设置性别
              </button>
            </div>
            <div v-else>
              <h3 class="Field-label">性别</h3>
              <div class="Field-content">
                <span class="Field-text">{{per_info.sex}}</span>
                <button type="button" class="change-button " @click="Editor('sex')" >
                  <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>
                  修改
                </button>
              </div>
            </div>


          </div>
          <!--            性别  编辑模式           -->
          <div style="padding-bottom: 20px"  v-bind:class="{Field_edit:!SexIsActive}">
            <h3 class="Field-label-back">性别</h3>
            <div class="Field-content">
              <div class="Field-radio">
                <input @change="InputStander('sex')" type="radio" name="sex"  id="nan" v-model="per_info.sex" value="男" ><label style="margin-right: 50px">男</label>
                <input  type="radio" name="sex" id="nv" v-model="per_info.sex" value="女" >女
              </div>
              <div class="">
                <input :disabled="this.isSexNull" type="button" value="保存" class="button-save" @click="saveName('sex')">
                <input type="button" value="取消" class="button-cancel" @click="cancel('sex')">
              </div>
            </div>

          </div>
        </form>
        <!--       QQ         -->
        <form class="Field">
          <!--      QQ      正常显示        -->
          <div class="Field-inline" v-bind:class="{Field_edit:QQIsActive}">

            <!--    QQ   当没有信息时的显示     -->
            <div v-if="this.per_info.QQ===''">
              <h3 class="Field-label">QQ</h3>
              <button type="button" class="Edit-per-button First-edit" @click="Editor('QQ')" >
                <svg t="1626684606485" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2768" width="200" height="200"><path d="M701.4 1012c-33.5 0-83.8-6.9-131-37.3l-4.6-3-6.9 1.5c-15.2 3-31.2 4.6-45.7 4.6-16 0-30.5-1.5-44.9-4.6l-9.9-2.3-4.6 3c-48.7 30.5-102.1 37.3-137.1 37.3-22.8 0-39.6-2.3-45.7-3.8h-1.5c-36.6-8.4-63.2-19-83-32-28.2-18.3-35.8-40.4-36.6-54.8-3-31.2 17.5-62.5 60.9-92.9 6.1-4.6 12.2-8.4 18.3-11.4l1.5-0.8-0.6-1.5c-8.4-12.9-16.8-28.9-25.1-46.5l-0.8-2.3-1.5 1.5c-19 20.6-38.1 31.2-57.1 31.2-3 0-5.3 0-8.4-0.8-45.7-6.9-59.4-64.7-61.7-76.9-20.6-96.7 43.4-192.7 72.4-230l0.8-0.8v-0.8c-22.8-53.3 12.2-105.9 23.6-121.1v-1.6c1.5-109.7 34.3-196.5 96.7-258.9C348 28.8 449.3 14.3 489.7 12H534.8c31.2 1.5 139.4 13.7 220.9 95.2 62.5 62.5 95.2 149.3 96.7 258.9v1.6c11.4 14.5 46.5 67 23.6 121.1v0.8l0.8 0.8c28.2 36.6 92.2 133.3 72.4 230-3 16-18.3 70.1-61.7 76.9-3 0.8-5.3 0.8-8.4 0.8-19 0-38.8-10.7-57.1-31.2l-1.5-1.5-0.8 2.3c-7.6 16.8-16 32.7-25.1 46.5l-0.8 1.5 1.5 0.8c6.9 3.8 12.9 7.6 18.3 11.4 43.4 30.5 64 61.7 60.9 92.9-1.5 14.5-9.1 36.6-36.6 54.8-19.8 12.9-46.5 23.6-82.3 32-3.2-0.9-23.7 4.4-54.2 4.4z m-96.7-90.6c34.3 22.1 71.6 27.4 96.7 27.4 21.3 0 35-3 35-3 54.1-12.9 67.8-26.7 70.8-30.5l0.8-0.8v-0.8c-1.5-4.6-8.4-16-36.6-35-8.4-6.1-22.8-14.5-41.9-23.6l-3-1.5c-20.6-9.1-24.4-35.8-7.6-51l1.5-1.5c27.4-23.6 51.8-92.2 58.6-113.5l0.8-3c7.6-25.9 42.7-29.7 56.4-6.1l1.5 3c17.5 32 29.7 44.9 35.8 50.3l1.5 1.5 0.8-1.5c3-5.3 6.9-15.2 8.4-22.1 19.8-92.2-71.6-192.7-73.1-193.5l-0.8-0.8c-9.9-11.4-10.7-28.2-1.5-39.6l0.8-0.8c6.1-7.6 12.9-19.8 3.8-42.7-5.3-13.7-14.5-25.1-18.3-28.9-5.3-6.1-8.4-13.7-8.4-22.1 0.8-97.5-25.9-173.6-77.7-225.4C645 92 557.4 81.3 530.8 79h-38.1c-25.9 1.5-115 11.4-180.5 76.9-51.8 51.8-77.7 128-77.7 225.4v0.8c0 7.6-3 16-8.4 21.3-3.8 4.6-12.9 15.2-18.3 29.7-9.1 22.8-3 34.3 3.8 42.7l0.8 0.8c9.1 11.4 9.1 28.9-1.5 39.6l-0.8 0.8c-0.8 0.8-92.2 101.3-72.4 192.7 1.5 7.6 5.3 16.8 8.4 22.8l0.8 1.5 1.5-1.5c6.9-6.1 19-19.8 35.8-50.3l1.5-3c12.9-23.6 48.7-19.8 56.4 6.1l0.8 3c9.9 32.7 34.3 92.2 58.6 113.5l1.5 1.5c16.8 14.5 12.9 41.9-7.6 51-1.5 0.8-2.3 0.8-2.3 0.8-0.8 0-22.8 10.7-42.7 24.4-28.2 19-34.3 30.5-36.6 35v0.8l0.8 0.8c3 3.8 16 16.8 67.8 29.7 0.8 0 1.5 0.8 3 0.8 6.1 0.8 16.8 2.3 31.2 2.3 27.4 0 67.8-4.6 103.6-27.4l19-10.7c6.1-3.8 13.7-4.6 20.6-3l20.6 3.8c6.9 1.5 18.3 3 32.7 3 10.7 0 22.1-0.8 34.3-3l30.5-5.3h1.5l25.3 15.1z" p-id="2769" fill="#175199"></path></svg>                    点击设置QQ
              </button>
            </div>
            <div v-else>
              <h3 class="Field-label">QQ</h3>
              <div class="Field-content">
                <span class="Field-text">{{per_info.QQ}}</span>
                <button type="button" class="change-button " @click="Editor('QQ')" >
                  <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>
                  修改
                </button>
              </div>
            </div>



          </div>
          <!--         QQ      编辑模式           -->
          <div style="padding-bottom: 20px"  v-bind:class="{Field_edit:!QQIsActive}">
            <h3 class="Field-label-back">QQ</h3>
            <div class="Field-content">
              <input class="Field-input"  @input="InputStander('QQ')" v-model="per_info.QQ">
              <div class="">
                <input :disabled="this.isQQNull" type="button" value="保存" class="button-save" @click="saveName('QQ')">
                <input type="button" value="取消" class="button-cancel" @click="cancel('QQ')">
              </div>
            </div>

          </div>
        </form>
        <!--      用户简介      -->
        <form class="Field">
          <!--       用户简介    正常显示        -->
          <div class="Field-inline" v-bind:class="{Field_edit:IntroduceIsActive}">


            <!--   用户简介   当没有信息时的显示     -->
            <div v-if="this.per_info.introduce===''">
              <h3 class="Field-label">自我简介</h3>
              <button type="button" class="Edit-per-button First-edit" @click="Editor('introduce')" >
                <svg t="1626684853414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4036" width="200" height="200"><path d="M226 295h-39c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h13v-0.242c18.242-7.924 31-26.101 31-47.258 0-0.254-0.002-0.507-0.005-0.76l0.002-0.238a47.984 47.984 0 0 0-1.955-13.116C222.905 147.805 203.048 132 179.5 132c-26.585 0-48.465 20.143-51.21 46H128v724h663V295H279v6-6h-53z m0.02-64h-0.003H855c26.51 0 48-21.49 48-48s-21.49-48-48-48H284.222a112.312 112.312 0 0 0-23.872-33C281.7 122.394 295 151.144 295 183c0 17.178-3.867 33.452-10.778 48H226.02zM848 960H64V164c0-55.228 44.772-100 100-100h684c61.856 0 112 50.144 112 112s-50.144 112-112 112v672zM232 397h451c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H232c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m0 161h451c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H232c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m0 161h451c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H232c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z" p-id="4037" fill="#175199"></path></svg>
                点击用一句话介绍自己
              </button>
            </div>
            <div v-else>
              <h3 class="Field-label">自我简介</h3>
              <div class="Field-content">
                <span class="Field-text">{{per_info.introduce}}</span>
                <button type="button" class="change-button " @click="Editor('introduce')" >
                  <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>
                  修改
                </button>
              </div>
            </div>



          </div>
          <!--         用户简介     编辑模式           -->
          <div style="padding-bottom: 20px"  v-bind:class="{Field_edit:!IntroduceIsActive}">
            <h3 class="Field-label-back">自我简介</h3>
            <div class="Field-content">
              <input class="Field-input"  @input="InputStander('introduce')" v-model="per_info.introduce">
              <div class="">
                <input :disabled="this.isIntroNull" type="button" value="保存" class="button-save" @click="saveName('introduce')">
                <input type="button" value="取消" class="button-cancel" @click="cancel('introduce')">
              </div>
            </div>

          </div>
        </form>
        <!--      教育经历      -->
        <form class="Field">
          <!--     教育经历     正常显示        -->
          <div class="Field-inline" v-bind:class="{Field_edit:EducationIsActive}">
            <!--   教育经历  当没有信息时的显示     -->
            <div v-if="this.per_info.education===''">
              <h3 class="Field-label">教育经历</h3>
              <button type="button" class="Edit-per-button First-edit" @click="Editor('education')" >
                <svg t="1626685181989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5236" width="200" height="200"><path d="M927.889035 428.632267c19.764136-11.073196 31.107485-28.77844 31.118741-48.589648 0.011256-19.817348-11.31879-37.546128-31.095205-48.64286L560.281633 125.151371c-27.001981-15.155165-69.650313-15.136745-96.534614-0.00614L96.116081 331.388503c-19.787672 11.084453-31.129998 28.814256-31.124881 48.63672s11.354606 37.541011 31.107485 48.589648l102.747105 57.648978c-0.065492 0.884137-0.265036 1.728364-0.265036 2.629897l0 274.010701c0 2.029216 0.169869 4.01136 0.49835 5.947456 6.897084 92.851735 161.142074 141.389194 313.029366 141.389194 153.575748 0 309.568545-49.628304 313.193095-144.520511 0.070608-0.927115 0.105401-1.865487 0.105401-2.815115l0-274.010701c0-0.895393-0.198521-1.735527-0.26299-2.615571L927.889035 428.632267zM499.029594 187.981349c1.653663-0.932232 6.251378-2.50403 12.973476-2.50403 5.876847 0 10.755971 1.260713 12.995989 2.51631l342.259084 192.020338L524.986779 572.050678c-1.653663 0.927115-6.251378 2.50403-12.984732 2.50403-5.888104 0-10.768251-1.260713-12.995989-2.51017L156.746974 380.007827 499.029594 187.981349zM753.339604 761.051239c-0.023536 0.49221-0.034792 0.973164-0.047072 1.466398-0.281409 26.673499-92.065835 75.656097-241.185085 75.656097s-240.914932-48.982598-241.202481-75.656097c-0.017396-1.325182-0.105401-2.62785-0.257873-3.917216L270.647093 526.549368 463.74702 634.892935c13.476943 7.565303 30.614252 11.729136 48.25605 11.729136 17.653055 0 34.790364-4.169973 48.25605-11.729136l193.081507-108.329241L753.340627 761.051239z" p-id="5237" fill="#175199"></path><path d="M917.789003 458.397175c-19.905352 0-36.033681 16.134469-36.033681 36.033681l0 286.068318c0 19.905352 16.128329 36.033681 36.033681 36.033681s36.033681-16.128329 36.033681-36.033681L953.822684 494.429833C953.822684 474.53062 937.694355 458.397175 917.789003 458.397175z" p-id="5238" fill="#175199"></path></svg>
                点击设置教育经历
              </button>
            </div>
            <div v-else>
              <h3 class="Field-label">教育经历</h3>
              <div class="Field-content">
                <span class="Field-text">{{per_info.education}}</span>
                <button type="button" class="change-button " @click="Editor('education')" >
                  <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>
                  修改
                </button>
              </div>
            </div>
          </div>
          <!--        教育经历     编辑模式           -->
          <div style="padding-bottom: 20px"  v-bind:class="{Field_edit:!EducationIsActive}">
            <h3 class="Field-label-back">教育经历</h3>
            <div class="Field-content" >
              <input @input="InputStander('education')" class="edu-input" placeholder="学校" style="width: 150px" v-model="per_info.school">
              <input @input="InputStander('education')" class="edu-input" placeholder="学历" style="width: 80px" v-model="per_info.edu">


              <div class="">
                <input  :disabled="this.isEducationNull"  type="button" value="保存" class="button-save" @click="saveName('education')">
                <input type="button" value="取消" class="button-cancel" @click="cancel('education')">
              </div>
            </div>
          </div>
        </form>
        <!--      居住地      -->
        <form class="Field">
          <!--         居住地   正常显示        -->
          <div class="Field-inline" v-bind:class="{Field_edit:LocationIsActive}">

            <!--     居住地  当没有信息时的显示     -->
            <div v-if="this.per_info.location===''">
              <h3 class="Field-label">居住地</h3>
              <button type="button" class="Edit-per-button First-edit" @click="Editor('location')" >
                <svg t="1626685235322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6552" width="200" height="200"><path d="M614.144 949.333333h-204.288c-107.776 0-195.434667-88.618667-195.434667-197.568v-174.954666H147.605333a72.448 72.448 0 0 1-67.776-46.485334 73.258667 73.258667 0 0 1 18.538667-81.024L460.586667 96.064c27.605333-27.690667 75.648-27.562667 103.082666 0.256L926.250667 449.92c21.781333 20.096 29.077333 51.904 17.92 80.426667a72.490667 72.490667 0 0 1-67.776 46.485333h-66.816v174.954667c0 108.928-87.658667 197.546667-195.434667 197.546666zM512 138.666667a8.405333 8.405333 0 0 0-6.122667 2.602666l-0.448 0.426667L142.421333 495.744c-4.821333 4.458667-3.904 8.96-2.986666 11.285333 1.493333 3.84 4.245333 5.781333 8.170666 5.781334h78.378667a52.629333 52.629333 0 0 1 52.437333 52.693333v186.261333c0 73.642667 58.965333 133.568 131.434667 133.568h204.288c72.469333 0 131.434667-59.925333 131.434667-133.568v-186.261333a52.629333 52.629333 0 0 1 52.437333-52.693333h78.378667c3.925333 0 6.677333-1.941333 8.170666-5.781334a9.237333 9.237333 0 0 0-2.346666-10.688L518.570667 141.696A9.002667 9.002667 0 0 0 512 138.666667z m-28.885333-19.882667h0.213333-0.213333z" p-id="6553" fill="#175199"></path><path d="M512 800c-76.458667 0-138.666667-62.208-138.666667-138.666667s62.208-138.666667 138.666667-138.666666 138.666667 62.208 138.666667 138.666666-62.208 138.666667-138.666667 138.666667z m0-213.333333c-41.173333 0-74.666667 33.493333-74.666667 74.666666s33.493333 74.666667 74.666667 74.666667 74.666667-33.493333 74.666667-74.666667-33.493333-74.666667-74.666667-74.666666z" p-id="6554" fill="#175199"></path></svg>
                点击设置居住地
              </button>
            </div>
            <div v-else>
              <h3 class="Field-label">居住地</h3>
              <div class="Field-content">
                <span class="Field-text">{{per_info.location}}</span>
                <button type="button" class="change-button " @click="Editor('location')" >
                  <svg t="1626594951058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609" width="200" height="200"><path d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z" p-id="1610" fill="#175199"></path><path d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z" p-id="1611" fill="#175199"></path><path d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z" p-id="1612" fill="#175199"></path></svg>
                  修改
                </button>
              </div>
            </div>
          </div>
          <!--        居住地       编辑模式           -->
          <div style="padding-bottom: 20px"  v-bind:class="{Field_edit:!LocationIsActive}">
            <h3 class="Field-label-back">居住地</h3>
            <div class="Field-content">
              <input @input="InputStander('location')" class="Field-input " v-model="per_info.location">
              <div class="">
                <input :disabled="this.isLocNull"  type="button" value="保存" class="button-save" @click="saveName('location')">
                <input type="button" value="取消" class="button-cancel" @click="cancel('location')">
              </div>
            </div>
          </div>
        </form>

        <!--      标签      -->
        <form @submit.native.prevent class="Field">
          <!--         标签    正常显示        -->
          <div
              class="Field-inline"
              v-bind:class="{ Field_edit: LabelIsActive }"
          >
            <input style="display: none" />
            <!--     标签   当没有信息时的显示     -->
            <div v-if="this.oldTags.length===0">
              <h3 class="Field-label">标签</h3>
              <button
                  type="button"
                  class="Edit-per-button First-edit"
                  @click="Editor('label')"
              >
                <svg
                    t="1626746074086"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2004"
                    width="200"
                    height="200"
                >
                  <path
                      d="M562.873 99.366a31.976 31.976 0 0 1 27.132-9.044l276.973 39.567a31.976 31.976 0 0 1 27.133 27.133l39.567 276.973a31.976 31.976 0 0 1-9.044 27.132L461.127 924.635c-12.487 12.487-32.733 12.487-45.22 0L99.365 608.093c-12.487-12.487-12.487-32.733 0-45.22L562.873 99.366z m39.567 73.483L189.806 585.483l248.711 248.711L851.151 421.56l-31.088-217.623L602.44 172.85z m16.958 118.703c31.218-31.218 81.832-31.218 113.05 0 31.218 31.218 31.218 81.832 0 113.05-31.218 31.218-81.832 31.218-113.05 0-31.218-31.218-31.218-81.832 0-113.05z"
                      p-id="2005"
                      fill="#175199"
                  ></path>
                </svg>
                点击设置标签
              </button>
            </div>
            <div style="display: inline-flex" v-else>
              <h3 class="Field-label" >标签</h3>
              <div class="Field-content ">
                <div class="showLabel">
                  <tag
                      style="margin: 4px 4px 8px 2px; min-width: 44px"
                      v-for="(tag,index) in tagsChosen"
                      :key="tag+index"

                      @close="handleClose(tag)"
                  >{{ tag.labelName }}</tag>
                </div>
                <button
                    type="button"
                    class="change-button-label"
                    @click="Editor('label')"
                >
                  <svg
                      t="1626594951058"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1609"
                      width="200"
                      height="200"
                  >
                    <path
                        d="M913.58168 384.689453c-25.367761 0-45.933145 20.565385-45.933145 45.933145l0 408.214239L156.047544 838.836837 156.047544 189.407837l375.434671 0c25.368784 0 45.933145-20.565385 45.933145-45.933145 0-25.368784-20.564361-45.934169-45.933145-45.934169L110.079606 97.540524c-25.367761 0-45.933145 20.565385-45.933145 45.934169 0 0.450255 0.021489 0.895393 0.033769 1.343601l0 738.607064c-0.013303 0.448208-0.033769 0.893346-0.033769 1.343601 0 25.367761 20.565385 45.933145 45.933145 45.933145l803.095821 0c0.067538 0 0.135076-0.005117 0.202615-0.005117 0.068562 0 0.1361 0.005117 0.203638 0.005117 25.368784 0 45.934169-20.564361 45.934169-45.933145L959.515848 430.622598C959.515848 405.254837 938.950464 384.689453 913.58168 384.689453z"
                        p-id="1610"
                        fill="#175199"
                    ></path>
                    <path
                        d="M531.852652 611.321076l412.139641-414.500409c19.783579-19.783579 19.784602-51.861158 0-71.64576l-46.322002-46.322002c-19.785625-19.784602-51.863205-19.784602-71.647807 0L413.88489 493.351268 531.852652 611.321076z"
                        p-id="1611"
                        fill="#175199"
                    ></path>
                    <path
                        d="M373.206422 656.067186 508.80268 631.659287 397.613298 520.471952Z"
                        p-id="1612"
                        fill="#175199"
                    ></path>
                  </svg>
                  修改
                </button>
              </div>
            </div>
          </div>
          <!--        标签      编辑模式           -->
          <div
              style="padding-bottom: 20px"
              v-bind:class="{ Field_edit: !LabelIsActive }"
          >
            <h3 class="Field-label-back " style="top: -66px;">标签</h3>
            <div class="Field-content " >
              <div class="label-div">
                <tag
                    style="margin: 4px 4px 8px 2px; min-width: 44px"
                    v-for="(tag,index) in tagsChosen"
                    :key="tag+index+1"
                    closable="true"
                    @close="handleClose(tag)"
                >{{ tag.labelName }}</tag
                >
              </div>

              <div class="tag">
                <tag
                    v-for="(tag,index) in hotTags"
                    :key="tag+index"
                    :closable="false"
                    @handleChange="handleChange(tag)"
                    v-model="tag.checked"
                >{{ tag.labelName}}</tag
                >
                <tag @handleChange="addTag" v-if="!addingTag">+</tag>
                <cm-input-mini
                    :placeholder="'在此输入'"
                    @submit="submit"
                    v-if="addingTag"
                ></cm-input-mini>
                <tag @handleChange="randTags">换一换</tag>
              </div>
              <!--                  <input @input="InputStander('label')" class="Field-input " v-model="per_info.labels">-->
              <!--                  <textarea class="Field-textarea"></textarea>-->
              <div class="">
                <input

                    type="button"
                    value="保存"
                    class="button-save"
                    @click="saveName('label')"
                />
                <input
                    type="button"
                    value="取消"
                    class="button-cancel"
                    @click="cancel('label')"
                />
              </div>
            </div>
          </div>
        </form>

      </div>
    </div>
  </div>

</template>

<script>
import Tag from "../common/tag/tag.vue"
import CmInputMini from "../common/input/cm-input-mini.vue"
import {addTagsStatus} from "@/utils/utils";

export default {
  name: "editper",
  components:{Tag,CmInputMini},
  data(){
    return{

      checkNumber: 0,
      tags: [], //标签列表
      tags_back: [],//展示在输入框内以选中标签
      userInformation:this.$store.getters.userInfo,
      hotTags: [], //热门标签
      tagsChosen: [], //保存选中标签
      addingTag: false, //是否为添加标签状态
      oldTags: [], //编辑帖子时暂存老标签,checked为true即选中状态不发回后端处理，为false即未选中状态发回后端处理
      oldTagsCanceled: [], //取消掉的老标签
      per_info:{
        name:"？",
        QQ:"",
        sex:"",
        introduce:"",
        location:"",
        school:"",
        edu:"",
        education:"",
        labels:"",
      },

      HeadIsActive:false,
      SexIsActive:false,
      QQIsActive:false,
      IntroduceIsActive:false,
      EducationIsActive:false,
      LocationIsActive:false,
      LabelIsActive:false,
      sexReadOnly:false,
      isNameNull:true,
      isSexNull:true,
      isQQNull:true,
      isIntroNull:true,
      isLocNull:true,
      isSchoolNull:true,
      isEduNull:true,
      isMajorNull:true,
      isYearNull:true,
      isEducationNull:true,
      isLabelNull:false,

    }
  },
  created() {

    //第一次加载弹框时将资料获取
    console.log(this.userInformation)
    this.randTags();
    this.$getApi.findRelatedTags(this.userInformation.detail.userNo, 2).then((res) => {
      this.tagsChosen=addTagsStatus(res.data.labels,true)
      this.oldTags.push.apply(this.oldTags,this.tagsChosen)
      console.log('old',this.oldTags)

    });

    this.initialTheInfo()


  },
  methods:{
    initialTheInfo(){
      this.per_info.name=this.userInformation.detail.userNickname
      this.per_info.QQ=this.userInformation.detail.userQq
      this.per_info.sex=this.userInformation.detail.userGender
      this.per_info.introduce=this.userInformation.detail.userSynopsis
      this.per_info.education=this.userInformation.detail.userSchool
      this.per_info.location=this.userInformation.detail.userPlace
      this.per_info.school=this.userInformation.detail.userSchool.trim().split(" ")[0]
      this.per_info.edu=this.userInformation.detail.userSchool.trim().split(" ")[1]
      this.per_info.name===""?this.isNameNull=true:this.isNameNull=false
      this.per_info.sex===""?this.isSexNull=true:this.isSexNull=false
      this.per_info.QQ===""?this.isQQNull=true:this.isQQNull=false
      this.per_info.introduce===""?this.isIntroNull=true : this.isIntroNull=false
      this.per_info.school===""&&this.per_info.edu===""?this.isEducationNull=true:this.isEducationNull=false
      this.per_info.location===""?this.isLocNull=true:this.isLocNull=false
      this.per_info.labels===""?this.isLabelNull=true:this.isLabelNull=false
    },
    postTags(postNo) {
      //为帖子添加标签
      let config = {
        headers: {
          "Content-Type": "application/json",
        },
        transformRequest: [
          function (data) {
            return JSON.stringify(data);
          },
        ],
      };
      console.log("为个人打标签");
      let tags = [];
      let tagsTemp = []
      let deleteIndex;
      let i = 0
      while ( i < this.tagsChosen.length) {
        console.log(i)
        // for (let j = 0; j < this.oldTags.length; j++) {
        if(this.tagCompare(this.tagsChosen[i],this.oldTags) == true)
            // if (this.tagsChosen[i].labelNo == this.oldTags[j].labelNo) {
        {deleteIndex = i;
          this.tagsChosen.splice(deleteIndex, 1);
          i = 0;
        }
        else{
          i++;
        }
        // }
        // }
      }
      tagsTemp.push.apply(tagsTemp, this.oldTagsCanceled);
      tagsTemp.push.apply(tagsTemp,this.tagsChosen)
      console.log("最终列表",tagsTemp)

      for (let i = 0; i < tagsTemp.length; i++) {
        console.log(tagsTemp[i]);
        let tag = {};
        tag.obNo = postNo;
        tag.labelNo = tagsTemp[i].labelNo;
        tag.obType = 2;
        tags.push(tag);
      }


      console.log(JSON.stringify(tags));
      this.$getApi.giveAndRemoveTags(tags, config);
    },
    randTags() {
      //获取随机标签列表
      const that = this;
      this.$getApi.getRandomTags().then((res) => {
        that.hotTags = addTagsStatus(res.data.labels.splice(0, 9),false);
        let tagschosen = that.tagsChosen;
        console.log("tagschosen", that.tagsChosen);
        that.hotTags.forEach((tag) => {
          tagschosen.forEach((chosedtag) => {
            if (tag.labelNo == chosedtag.labelNo) {
              console.log("对比tag相等");
              tag.checked = true;
            }
          });
        });
      });
    },
    tagCompare(tag, list) {
      //判断一个列表中是否包含某标签
      console.log("begin--tagCompare:", tag, list);
      for (let i = 0; i < list.length; i++) {
        if (tag.labelNo == list[i].labelNo) {
          console.log("tagCompare", true);
          return true;
        }
      }
      console.log("tagCompare", false);
      return false;
    },
    handleChange(tag) {
      //标签点击事件
      if (tag.checked == false) {
        console.log('选中标签')
        if (this.tagsChosen.length == 6) alert("最多选择6个标签");
        else {
          this.tagsChosen = [...this.tagsChosen, tag];
          tag.checked = true;
          for(let i=0;i<this.oldTagsCanceled.length;i++){
            if(tag.labelNo == this.oldTagsCanceled[i].labelNo){
              this.oldTagsCanceled.splice(i,1);
              console.log('删除oldtagcanceled项目')
              break;
            }
          }
        }
      } else {
        tag.checked = false;
        let deleteIndex;
        for (let i = 0; i < this.tagsChosen.length; i++) {
          if (this.tagsChosen[i].labelNo == tag.labelNo) deleteIndex = i;
        }

        if (
            this.tagCompare(this.tagsChosen[deleteIndex],this.oldTags) == true
        ) {
          this.oldTagsCanceled.push(this.tagsChosen[deleteIndex]);
        }
        this.tagsChosen.splice(deleteIndex, 1);
      }
    },
    handleClose(tag) {
      //标签关闭事件
      let deleteIndex = this.tagsChosen.indexOf(tag);
      let disableIndex = this.hotTags.indexOf(tag);
      this.tagsChosen.splice(deleteIndex, 1);
      for (let i = 0; i < this.hotTags.length; i++) {
        if (this.hotTags[i].labelNo == tag.labelNo) disableIndex = i;
      }
      if (this.tagCompare(this.hotTags[disableIndex],this.oldTags) == true) {
        this.oldTagsCanceled.push(this.hotTags[disableIndex]);
      }
      if (disableIndex != -1) this.hotTags[disableIndex].checked = false;
    },
    submit(value) {
      //提交标签
      if (this.tagsChosen.length < 6) {
        let tag = {
          labelName: value,
          checked: false,
        };
        console.log("创建标签", tag);
        this.addTag();
        const that = this;
        this.$getApi.addTag(value).then((res) => {
          if(that.tagCompare(res.data.label1,that.tagsChosen)==false)
          {
            for(let i=0;i<that.hotTags.length;i++){
              if(that.hotTags[i].labelNo == res.data.label1.labelNo){
                that.hotTags[i].checked = true
              }
            }
            that.tagsChosen = [...that.tagsChosen, res.data.label1];
          }
        });
      } else {
        alert("最多6个标签");
      }
    },
    addTag() {
      this.addingTag = !this.addingTag;

    },
    InputStander(name){

      switch (name){
        case "head" : this.per_info.name===""?this.isNameNull=true:this.isNameNull=false;break;
        case "sex" :this.per_info.sex===""?this.isSexNull=true:this.isSexNull=false;break;
        case "QQ" :this.per_info.QQ===""?this.isQQNull=true:this.isQQNull=false;break;
        case "introduce" :this.per_info.introduce===""?this.isIntroNull=true : this.isIntroNull=false;break;
        case "education" :this.per_info.school===""&&this.per_info.edu===""?this.isEducationNull=true:this.isEducationNull=false;break;
        case "location" :this.per_info.location===""?this.isLocNull=true:this.isLocNull=false;break;
        case "label":this.per_info.labels===""?this.isLabelNull=true:this.isLabelNull=false;break;
      }

    },
    Editor(name){
      switch (name){
        case "head" :this.HeadIsActive=!this.HeadIsActive;break;
        case "sex" :this.SexIsActive=!this.SexIsActive;break;
        case "QQ" :this.QQIsActive=!this.QQIsActive;break;
        case "introduce" :this.IntroduceIsActive=!this.IntroduceIsActive;break;
        case "education" :this.EducationIsActive=!this.EducationIsActive;break;
        case "location" :this.LocationIsActive=!this.LocationIsActive;break;
        case "label":this.LabelIsActive=!this.LabelIsActive;break;
      }

    },
    saveName(name){

      switch (name){
        case "head" :this.HeadIsActive=!this.HeadIsActive;
          this.userInformation.detail.userNickname=this.per_info.name;break;
        case "sex" :this.SexIsActive=!this.SexIsActive;
          this.userInformation.detail.userGender=this.per_info.sex;break;
        case "QQ" :this.QQIsActive=!this.QQIsActive;
          this.userInformation.detail.userQq=this.per_info.QQ;break;
        case "education" :this.EducationIsActive=!this.EducationIsActive;
          this.userInformation.detail.userSchool=this.per_info.school+" "+ this.per_info.edu;
          this.per_info.education=this.userInformation.detail.userSchool;break;
        case "introduce" :this.IntroduceIsActive=!this.IntroduceIsActive;
          this.userInformation.detail.userSynopsis=this.per_info.introduce;break;
        case "location" :this.LocationIsActive=!this.LocationIsActive;
          this.userInformation.detail.userPlace=this.per_info.location;break;
        case "label":this.LabelIsActive=!this.LabelIsActive;          break;
          // this.userInformation.detail.userPlace=this.per_info.labels;

      }
      if(name!=="label"){
        this.$store.commit("setUserInfo",this.userInformation)
        this.$getApi.updatePersonalInfo(this.userInformation.detail.userInformationNo,this.userInformation.detail.userNo,this.userInformation.detail.userNickname,this.userInformation.detail.userQq,this.userInformation.detail.userGender,this.userInformation.detail.userSynopsis,this.userInformation.detail.userSchool,this.userInformation.detail.userPlace)

      }
      else {
        this.postTags(this.userInformation.detail.userNo)

      }


    },
    cancel(name){

      switch (name){
        case "head" :this.HeadIsActive=!this.HeadIsActive;
          this.per_info.name= this.userInformation.detail.userNickname;break;
        case "sex" :this.SexIsActive=!this.SexIsActive;
          this.per_info.sex=this.userInformation.detail.userGender.sex;break;
        case "QQ" :this.QQIsActive=!this.QQIsActive;
          this.per_info.QQ=this.userInformation.detail.userQq;break;
        case "introduce" :this.IntroduceIsActive=!this.IntroduceIsActive;
          this.per_info.introduce=this.userInformation.detail.userSynopsis;break;
        case "education" :this.EducationIsActive=!this.EducationIsActive;
          // this.per_info.education=this.per_info_temp.school+" "+ this.per_info_temp.edu+""+this.per_info_temp.major+this.per_info_temp.years;
          // this.per_info.school=this.per_info_temp.school;
          // this.per_info.edu=this.per_info_temp.edu;
          // this.per_info.major=this.per_info_temp.major;
          // this.per_info.years=this.per_info_temp.years;
          break;
        case "location" :this.LocationIsActive=!this.LocationIsActive;
          this.per_info.location= this.userInformation.detail.userPlace;break;
        case "label":this.LabelIsActive=!this.LabelIsActive;
          // this.per_info.labels=this.per_info_temp.labels;
          break;
      }
    }

  },
}
</script>

<style scoped>
.showLabel{
  overflow-y:hidden;
  word-wrap:break-word;
  overflow-x:auto;
  min-height: 30px;
  width: 398px;
}
.report-title{
  font-size: 20px;
  border-bottom: 1px solid rgb(240,240,240);
  padding: 15px;
}
.report-title span{
  padding:5px 11px;
  border-left:5px rgb(255, 80, 80) solid;
}
.label-div {
  overflow-y:hidden;
  word-wrap:break-word;
  overflow-x:auto;
  min-height: 30px;
  width: 398px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.tag {
  width: 500px;
  margin-top: 10px;

}


.ProfileHeader-content{
  padding-top: 16px;
  padding-left: 50px;
  padding-right: 50px;

}
.ProfileHeader-contentHead{
  position: relative;



}
.ProfileHeader-title{
  margin:0;
}
.Field-input{

  width: 398px;
  height: 24px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  display: flex;
  margin-top: 25px;
  margin-bottom: 10px;
}

.edu-input{
  height: 24px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  margin-right: 15px;
  margin-top: 25px;
  margin-bottom: 10px;
}
.edu-input:focus{
  outline: none;
  border: 1px solid #8590a6;
}
.Field-radio{

}

.Field-input:focus{
  outline: none;
  border: 1px solid #8590a6;
}
.Field-inline{
  height: 95px;

  padding-top:50px

}
.Field-textarea{
  resize: none;
  width: 398px;
  height: 50px;
  max-width: 398px;
  max-height: 50px;
  margin-bottom: 10px;
  margin-top: 25px;
  font-size: 18px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
}
.Field-textarea:focus{
  outline: none;
  border: 1px solid #8590a6;
}
.Field_edit{
  display:none;

}
.FullNameField_editable{
  display:none;

}
.FullNameField_edit{
  display: none;

}
.change-button{
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
}

.change-button-label{
  position: absolute;

  left: 104%;
  top: 13%;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
}
.change-button-label:hover{
  position: absolute;

  left: 104%;
  top: 13%;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 1;

}
.Field-radio input{
  margin-bottom: 30px;

}

.change-button:hover{
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 1;

}
.Edit-per-button{
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
}
.Edit-per-button:hover{
  margin-left: 12px;
  border: 0;
  background-color: white;
  color: #175199;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.7;
}
.ProfileEdit-fields{
  position: relative;
  padding-bottom: 100px;
  margin-top: 10px;
}
.Field{


  min-height: 30px;

  border-bottom:1px solid #ebebeb ;

}
.NameField-label{

  position: relative;
  left: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: style;
  line-height: 36px;
  color: #444;
  display: inline-block;
  margin-bottom: 60px;
}
.Field-label{
  position: relative;
  /*top:-50px;*/
  left: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: style;
  line-height: 36px;
  color: #444;
  width: 60px;
  display: inline-block;
}
.Field-label-back{
  position: relative;
  width: 60px;
  top:-50px;
  left: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: style;
  line-height: 36px;
  color: #444;
  display: inline-block;
}
.Field-content{

  position: relative;
  left: 112px;
  display: inline-block;
  height: 94px;

}

.FieldName-input{
  margin-top: 12px;

  width: 398px;
  height: 24px;
  padding: 5px 11px;
  border: #ebebeb 1px solid;
  border-radius: 3px;
  display: flex;


}
.FieldName-input:focus{
  outline: none;
  border: 1px solid #8590a6;

}
.nameField-content{
  position: absolute;
  left: 22%;
  top:5%;


}
.Field-text{

}
.button-cancel{
  font-size: 14px;
  color: #8590a6;
  background-color: #ffffff;
  cursor: pointer;
  padding: 0 16px;
  line-height: 32px;
  border-radius:3px ;
  outline: none;
  border: 1px solid #8590a6;
  margin-left: 18px;

}
.button-save {
  font-size: 14px;
  color: #fff;
  background-color: #06f;
  cursor: pointer;
  padding: 0 16px;
  line-height: 32px;
  border: 1px solid;
  border-radius:3px ;
  outline: none;
}
.First-edit{
  margin-left: 60px;
}
.First-edit:hover{
  margin-left: 60px;
}
</style>
